<template>
    <div class="home">
        <HomeHeader />
        <HomeSwiper :imgList="imgList"/>
        <HomeIcons :iconList="iconList"/>
        <HomeLocation />
        <HomeHot :hotList="hotList"/>
        <HomeLike :likeList="likeList"/>
        <HomeVacation :vacationList="vacationList"/>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import HomeSwiper from './pages/Swiper.vue'
import HomeHeader from './pages/Header.vue'
import HomeIcons from './pages/Icons.vue'
import HomeLocation from './pages/Location.vue'
import HomeHot from './pages/Hot.vue'
import HomeLike from './pages/Like'
import HomeVacation from './pages/Vacation'

export default {
    components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeLocation,
        HomeHot,
        HomeLike,
        HomeVacation,
    },
    data() {
        return {
            imgList:[],
            iconList:[],
            hotList:[],
            likeList:[],
            vacationList:[],
        }
    },
    methods: {
        getHttp(){
            this.$http.get("/api/dataHome.json").then((result) => {
            const data = result.data.data
            data.forEach((item,index) => {
                if(item.city == this.city){
                    
            this.imgList = item.imgList        
            this.iconList =item.iconList        
            this.hotList = item.hotList        
            this.likeList = item.likeList        
            this.vacationList = item.vacationList  
                }
            });    
        })
        }
    },
    mounted() {
        this.changeCity = this.city
        this.getHttp()
    },
    activated() {
        if(this.changeCity != this.city){
            this.getHttp()
            this.changeCity = this.city
        }
    },
    computed:{
        ...mapState(['city'])
    }
}
</script>
<style scoped>
    .home{
        background-color: rgb(236, 236, 236);
    }
</style>